<template>
  <!-- header -->
  <header class="bar bar-nav bar-header">
    <a class="button button-link button-nav pull-left" v-if="$route.backBtn" @click="GoBack">
      <span class="icon icon-icback icon-size" style="line-height:2.1rem"></span>
    </a>
    <a class="button button-link pull-right" :class="{'icon icon-icstar1':collect,'icon icon-icstar2':isFollow}" v-text="headerRight" @click="callBack"></a>
    <h1 class="title" v-text="pageTitle"></h1>
  </header>
</template>
<script>
    export default {
        replace:true,
        props:{
          pageTitle:{type:String,default(){return'标题'}},
          headerRight:{type:String,default(){return''}},
          collect:{type:Boolean,default(){return false}},
          isFollow:{type:Boolean,default(){return false}},
          callBack:{type:Function,default(){return function(){}}}
        },
        methods:{
          GoBack:function(){
            window.history.back();
          }
        }
    }
</script>
<style lang="stylus">
.bar.bar-header
  background-color:#8352F2
  h1
    color:#fff
.bar.bar-footer
  background-color:#fff    
.bar-tab
  .tab-item
    &.active
      color:#8352F2
      background-color:#fff
.fade-transition
  transition: all .3s ease;
.fade-enter, .fade-leave 
  opacity: 0;

.scroll-transition
  display:block
.scroll-enter
  animation: pageFromRightToCenter .3s forwards;
.scroll-leave  
  animation: pageFromCenterToLeft .3s forwards;
.screen
	animation: pageFromRightToCenter .3s forwards;
@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.5;
        transform: translate3d(-20%,0,0);
    }
}

.no-data{
  padding:2em;
  text-align:center;
  font-size:.75em;
  color:#ccc;
  padding:6em 0 3em;
  background:#fff url(/src/asserts/images/img_null.png) no-repeat center 2em;
} 
.text-oneline{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-style
  height 2rem
  font-size .85rem
  line-height 2rem !important
  width 100%
.product-status 
    width: 2.2rem;
   	line-height:1rem;
    height: 1rem;   
    position: relative;
    font-size: .5rem;
    text-align: center;
    
.product-status:before 
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    position: absolute;
    border-top: 0.5rem solid transparent;
    border-right: 0.5rem solid #ff9;
    border-bottom: 0.5rem solid transparent;
.product-status-bg1{
		background: #F5E9CD;
		color:#a48439
}
.product-status-bg1:before{
		border-right-color:#F5E9CD;
}
.product-status-bg2{
		background: #DFF5DF;
		color:#11b864;
}
.product-status-bg2:before{
		border-right-color:#DFF5DF;
}
.product-status-bg3{
		background: #F5F5F5;
		color:#999
}
.product-status-bg3:before{
		border-right-color:#F5F5F5;
}
.icon-size
  font-size 1.2rem!important
.wrap
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background: #efeff4;
    overflow: hidden;
    z-index:2000;  
</style>
